<template>
  <div class="login"> 
    <img src="@/assets/logo.png" alt="" class="logo">
    <van-form @submit="Login">
  <van-field
    v-model="phone"
    required
    name="手机号"
    label="手机号"
    placeholder="手机号"
    :rules="[{ required: true, message: '请填写手机号' }]"
  />
  <van-field
    v-model="password"
    required
    type="password"
    name="密码"
    label="密码"
    placeholder="密码"
    :rules="[{ required: true, message: '请填写密码' }]"
  />
  <div class="div tip flex flex-end">
    <span>还没有账号? <router-link to="/register">去注册</router-link></span>
  </div>

    <div class="btn-box">
        <van-button type="info" round class="btn-common" native-type="submit" loading-text="登录中..." :loading="loading">
       登录
      </van-button>
      </div>
</van-form>
    
  </div>

</template>

<script>
import Mock from "mockjs";
export default {
  components: {
   
  },
  data() {
    return {
      loading:false,
     phone: '',
      password: '',
     
    };
  },

  methods: {
  
    Login(values) {
      let _this = this;      
              let params = {
            mobile: _this.phone,
            password: _this.password,           
          };
          _this.loading = true
          _this.$ajax
            .post(`${_this.$baseUrl}/portal/users/login`, params)
            .then(function(res) {
              _this.loading = false
              if (res.data.code == 200) {  
                console.log('数据',)             
                _this.$store.commit('saveUser',res.data.data[0]); 
                 _this.$toast.success('登录成功!');
                setTimeout(() => {
                   _this.$router.push({ path: "/index", query: {} });

                },2000)                    
                
               
              }
            })
            .catch(function(error) {
               _this.loading = false
              console.log(error);
            });
    },
    

  },
  created() {
   
   
   
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.login{
  padding: 0 .6rem;
  box-sizing: border-box;
  min-height: 100vh;
  background: #fff;
  .logo{
    width: 2.52rem;
    margin: 1rem auto;
  }
 
.van-cell{ 
    padding: .3rem;
   }
  .btn-box{
    box-sizing: border-box;
    padding: 1.5rem 16px;
  }
.tip{
  font-size: .28rem;
  padding: .3rem;
  color: #999;
}
}
a{
  text-decoration: underline;
}
</style>
